    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>场馆预约状态查询</title>
        <script src="https://code.jquery.com/jquery-3.6.4.js"></script>
        <style type="text/css">
            table {
                border-collapse: collapse;
                width: 80%;
                margin: auto;
            }

            th, td {
                border: 1px solid black;
                padding: 10px;
                text-align: center;
            }

            th {
                background-color: lightblue;
            }

            h1, form, input {
                text-align: center;
            }

            select {
                width: 100px;
                height: 30px;
            }

            a {
                text-decoration: none;
            }

            button {
                background-color: orange;
            }
            #result{
                position: fixed;
                right: 50px;
            }

        </style>
        <script>
            $(document).ready(function() {
                console.log("进来了**********")
                $.get("../admin/getStadiumNames", function(data) {
                    // 将获取到的数据渲染到下拉框中
                    var select = document.getElementById("selectName");
                    for (var i = 0; i < data.length; i++) {
                        var option = document.createElement("option");
                        option.text = data[i];
                        option.value = data[i];
                        select.add(option);
                    }
                });
            });
        </script>
    </head>
    <body>
    <h1>场馆预约状态和预约人信息查询</h1>

    <form action="../admin/quaryStdiumStatus" method="get">
        <select name="name" id="selectName" >
            <option>---请选择---</option>

        </select>
        <input type="submit" name="submit">
    </form>


    <table>
        <tr>
            <th>用户名</th>
            <th>场馆</th>
            <th>预约开始时间</th>
            <th>预约结束时间</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>是否预约</th>
            <th>预约人数</th>
            <th>用户信息</th>
        </tr>
        <!-- 循环遍历map并给每一个场馆一行来展示 -->
        <c:forEach var="entry" items="${inf}">
            <tr>
                <td>${entry.key.userAccount}</td>
                <td>${entry.key.stadiumName}</td>
                <td><fmt:formatDate type="both" value="${entry.key.reservationStartTime}"/></td>
                <td><fmt:formatDate type="both" value="${entry.key.reservationEndTime}"/></td>
                <td><fmt:formatDate type="both" value="${entry.key.createTime}"/></td>
                <td><fmt:formatDate type="both" value="${entry.key.updateTime}"/></td>
                    <%--            <td>${entry.key.isDelete}</td>--%>
                <c:if test="${entry.key.isDelete==0}">
                    <td>是</td>
                </c:if>
<%--                entry.key.reservedNumber--%>
                <c:if test="${empty entry.key.reservedNumber }">
                    <td>1</td>
                </c:if>
                <c:if test="${not empty entry.key.reservedNumber}">
                    <td>${entry.key.reservedNumber}</td>
                </c:if>

                <td>
                    <button><a href="../admin/quaryUserInfo/${entry.key.userAccount}">查询</a></button>
                </td>
            </tr>
        </c:forEach>

    </table>
    <button id="result" type="button" onclick="download()">下载附件</button>

    <script>
        function download() {
            var name = "${option}";
            console.log(name);
            // const name = encodeURIComponent($("#selectName").val());
            $.ajax({
                url: "http://localhost:8080/stadium/common/downLoadQueryStadium",
                method: "POST",
                data: {name: name},
                xhrFields: {
                    responseType: 'blob'
                },
                success: function (data) {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(data);
                    console.log(url)
                    a.href = url;
                    a.download = "queryStadium.csv";
                    document.body.append(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    $(a).remove();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("Error:", errorThrown);
                }
            });
            console.log("111")
        }

    </script>
    </body>
    </html>